'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'

export default function CodePage() {
  const router = useRouter()
  const [codeData, setCodeData] = useState({
    verificationCode: ''
  })

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setCodeData(prev => ({
      ...prev,
      [name]: value
    }))
  }

  return (
    <div className="flex flex-col min-h-[50vh]">
      <div className="container mx-auto px-4 py-8 max-w-5xl flex-grow">
        {/* Logo */}
        <div className="text-center mb-8">
          <h1 className="text-2xl text-gray-700 mb-4">Verification Code Page</h1>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {/* 左侧验证码表单 */}
          <div className="bg-gray-50 p-6 rounded-lg">
            <div className="mb-6">
              <h2 className="text-lg font-medium text-gray-700 flex items-center">
                Verification Code
              </h2>
            </div>

            <div className="space-y-4">
              <div>
                <label className="block text-sm text-gray-600 mb-1">Verification Code</label>
                <div className="relative">
                  <input
                    type="text"
                    name="verificationCode"
                    value={codeData.verificationCode}
                    onChange={handleInputChange}
                    className="w-full p-2 border rounded"
                    placeholder="Enter verification code"
                  />
                </div>
              </div>
            </div>
          </div>

          {/* 右侧说明 */}
          <div className="bg-gray-50 p-6 rounded-lg">
            <h2 className="text-lg font-medium text-gray-700 mb-6">Order Summary</h2>
            <div className="space-y-4">
              <div className="flex justify-between text-sm">
                <span className="text-gray-600">Payment Reference</span>
                <span>138156110587861401</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-gray-600">Order No.</span>
                <span>3551</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-gray-600">Amount</span>
                <span className="text-orange-500">USD 25.95</span>
              </div>
            </div>
          </div>
          {/* <h2 className="text-lg font-medium text-gray-700 mb-6">Instructions</h2> */}
            <div className="space-y-4">
              <div className="text-sm text-gray-600">
                <p>1. Click "Send Code" to receive verification code</p>
                <p>2. Enter the code you received</p>
              </div>
            </div>
          </div>
          {/* 按钮 */}
        <div className="mt-8 text-center">
          <button className="bg-orange-500 text-white px-8 py-3 rounded-md text-lg font-medium hover:bg-orange-600 transition-colors">
            Verify Code
          </button>
          <div className="mt-4">
            <button 
              onClick={() => router.back()}
              className="text-gray-600 underline hover:text-gray-800"
            >
              Cancel and Return
            </button>
          </div>
        </div>
        {/* 底部黑色部分 */}
        {/* <div className="bg-black text-white py-1 text-center">
            <p className="text-xs">© 2024 Your Company. All rights reserved.</p>
        </div> */}
        </div>

        
      </div>
  )
}